<template>
	<view>
		<view class="header-section">
			<view class="header_left" @click="handleReturn">
				<view class="menu-list iconfont icon-back menu-icon" />
			</view>
			<view class="header-content">
				<text>订单记录</text>
			</view>
			<view class="header_right" @click="handleNotice">
				<view class="menu-list iconfont icon-notice menu-icon" />
			</view>
		</view>
		<view class="content-section">
			<view class="content-query">
				<uni-search-bar placeholder="搜索订单号/地址" bgColor="#FFFFFF" @confirm="search" @input="inputSearch" />
			</view>
			<view class="content-tag">
				<uni-data-checkbox mode="tag" v-model="status" :localdata="statusList" @change="checkboxChange" />
			</view>

			<view class="content-list">
				<view class="content-card" v-for="item in indentList" :key="item.order">
					<uni-card>
						<template v-slot:title style="margin-top: 1%; margin-top:1%;">
							<view class="card-top-title">
								<view class="card-top-left">
									<text>订单信息：{{item.order}}</text>
								</view>
								<view class="card-top-right">
									<uni-indent-tag :status="item.status" :inverted="true" />
								</view>
							</view>
						</template>
						<view class="card-content">
							<view class="iconfont icon-form_fill_light content-top">
								<text>{{item.address}}</text>
							</view>
						</view>
						<view class="card-content">
							<view class="iconfont icon-infofill content-top">
								<text>{{item.issue}}</text>
							</view>
						</view>
						<view class="card-content">
							<view class="iconfont icon-countdownfill content-top">
								<text>{{item.crate_time}}</text>
							</view>
						</view>
						<view class="card-bottom">
							<view class="card-bottom-left">
								<view class="card-bottom-left-tag" v-if="item.tag.length > 0"
									v-for="tag_item in item.tag" :key="tag_item.title">
									<uni-tag :text="tag_item.title" :type="tag_item.type" :inverted="true"
										:circle="true" />
								</view>

							</view>
							<view class="card-bottom-right">
								<button v-if="item.status == '1'" size="mini" :inverted="true" type="primary"
									@click="handleOrder(item.order)">接单</button>
							</view>
						</view>
					</uni-card>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 查询条件
				searchValue: "",
				// 订单状态
				status: "0",
				statusList: [{
					text: '全部',
					value: '0',
					count: 128
				}, {
					text: '当日数量',
					value: '1',
					count: 3
				}, {
					text: '当月数量',
					value: '2',
					count: 45
				}],
				// 订单原始数据
				initIndenList: [{
					'order': 'WX20240108001',
					'address': '杭州市钱塘区',
					'issue': '1号电梯异响，需要检修',
					'crate_time': '2025-05-28 10:30',
					'tag': [{
						'type': 'success',
						'title': '故障维修'
					}, {
						'type': 'error',
						'title': '紧急'
					}],
					'status': '3',
					'date_status': "1"
				}, {
					'order': 'WX20240108002',
					'address': '杭州市钱塘区',
					'issue': '2号电梯异响，需要检修',
					'crate_time': '2025-05-28 10:30',
					'tag': [{
						'type': 'success',
						'title': '故障维修'
					}],
					'status': '3',
					'date_status': "1"
				}, {
					'order': 'WX20240108003',
					'address': '杭州市钱塘区',
					'issue': '3号电梯异响，需要检修',
					'crate_time': '2025-05-23 10:30',
					'tag': [{
						'type': 'success',
						'title': '故障维修'
					}, {
						'type': 'error',
						'title': '紧急'
					}],
					'status': '3',
					'date_status': "2"
				}, {
					'order': 'WX20240108004',
					'address': '杭州市钱塘区',
					'issue': '4号电梯异响，需要检修',
					'crate_time': '2025-05-23 10:30',
					'tag': [{
						'type': 'success',
						'title': '故障维修'
					}],
					'status': '3',
					'date_status': "2"
				}, {
					'order': 'WX20240108005',
					'address': '杭州市钱塘区',
					'issue': '5号电梯异响，需要检修',
					'crate_time': '2025-04-23 10:30',
					'tag': [{
						'type': 'success',
						'title': '故障维修'
					}],
					'status': '3',
					'date_status': "3"
				}, {
					'order': 'WX20240108005',
					'address': '杭州市钱塘区',
					'issue': '5号电梯异响，需要检修',
					'crate_time': '2025-04-23 10:30',
					'tag': [{
						'type': 'success',
						'title': '故障维修'
					}],
					'status': '3',
					'date_status': "3"
				}, {
					'order': 'WX20240108005',
					'address': '杭州市钱塘区',
					'issue': '5号电梯异响，需要检修',
					'crate_time': '2024-04-23 10:30',
					'tag': [{
						'type': 'success',
						'title': '故障维修'
					}],
					'status': '3',
					'date_status': "4"
				}, ],
				// 订单列表
				indentList: []
			}
		},
		created() {
			this.getIndent();
		},
		onLoad(options) {
			console.log(options);
			this.status = options.status
		},
		methods: {
			getIndent() {
				this.indentList = this.initIndenList
			},
			// 返回上一级
			handleReturn() {
				uni.navigateBack()
			},
			// 消息提醒
			handleNotice() {
				console.log("消息提示");
				this.$tab.reLaunch("/pages/message/index")
			},
			// 查询参数
			inputSearch(res) {
				if (res != "") {
					this.indentList = this.initIndenList.filter(item => {
						return (item.order.toString().includes(res) ||
							item.address.toString().includes(res))
					});
				} else {
					this.indentList = this.initIndenList
				}

			},
			// 状态框操作
			checkboxChange() {
				console.log(this.status);
				if (this.status == "2") {
					console.log(this.status);
					this.indentList = this.initIndenList.filter(item => {
						return (
							item.date_status.toString().includes(this.status) ||
							item.date_status.toString().includes(1)
						)
					});
				} else if (this.status != "0") {
					console.log(this.status);
					this.indentList = this.initIndenList.filter(item => {
						return (item.date_status.toString().includes(this.status))
					});
				} else {
					this.indentList = this.initIndenList
				}
			},

			// 接单按钮操作
			handleOrder(res) {
				if (!res || this.isProcessing) return
				uni.showModal({
					title: '确认接单',
					content: `订单 ${res} 即将分配给您`,
					success: (confirm) => {
						if (!confirm) return

						this.isProcessing = true

						// 创建新数组保持响应式
						this.initIndenList = this.initIndenList.map(item => {
							if (item.order.toString() === res.toString()) {
								return {
									...item,
									status: "2"
								}
							}
							return item
						})
						this.indentList = this.initIndenList

						// 显示操作反馈
						uni.showToast({
							title: '接单成功'
						})

						// 重置状态
						setTimeout(() => {
							this.isProcessing = false
						}, 1000)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #E5E7EB;
		// background-size: cover;
		// box-sizing: border-box;
		width: 100%;
		height: 100%;
	}

	.header-section {
		position: fixed;
		z-index: 9999;
		width: 100%;
		height: 5%;
		background-color: #FFFFFF;
		padding-top: 2%;
		padding-bottom: 2%;
		display: inline-block;
		overflow-y: hidden;
		border-bottom: 1px solid #dedede;

		.header_left {
			position: absolute;
			top: 1%;
			left: 2%;
		}

		.header-content {
			margin: 0 auto;
			text-align: center;

			text {
				font-family: Roboto;
				font-size: 18px;
				font-feature-settings: "kern" on;
				color: #000000;
			}
		}

		.header_right {
			position: absolute;
			top: 1%;
			right: 2%;
			// color: #007AFF;
			// font-size: 16px;
			// display: flex;
			// right: 10%;
			// width: 20px;
			// height: 20px;
			// opacity: 1;
		}

	}

	.content-section {
		padding-top: 10%;
		padding-bottom: 10%;
		position: relative;
		width: 100%;
		overflow-y: scroll;

		.content-tag {
			margin-left: 3%;
		}

		.content-list {
			overflow: auto;

			.content-card {
				position: relative;
				width: 100%;
				// background-color: #FFFFFF;
				margin-top: 0.5%;
				border-radius: 5px;
				display: inline-flex;

				.card-top-title {
					position: relative;
					width: 100%;
					display: inline-flex;


					.card-top-left {
						position: absolute;
						left: 3%;

						text {
							font-family: system-ui;
							font-size: 15px;
							line-height: 21px;
							letter-spacing: 0px;

							font-feature-settings: "kern" on;
							color: #111827;
						}
					}

					.card-top-right {
						position: absolute;
						right: 5%;
					}
				}

				.card-content {
					width: 100%;
					margin-top: 2%;
					word-wrap: break-word;

					.content-top {
						width: 100%;

						text {
							padding-left: 1%;
							font-family: Roboto;
							font-size: 14px;
							font-weight: normal;
							line-height: 17.5px;
							letter-spacing: 0px;
							font-feature-settings: "kern" on;
							color: #4B5563;
						}
					}
				}

				.card-bottom {
					position: relative;
					width: 100%;
					display: inline-flex;
					margin-top: 2%;
					margin-bottom: 8%;

					.card-bottom-left {
						position: absolute;
						left: 3%;

						.card-bottom-left-tag {
							display: inline-flex;
							padding: 2px;
						}
					}

					.card-bottom-right {
						position: absolute;
						top: -1%;
						right: 5%;
					}
				}
			}
		}
	}
</style>